<template>
  <div>
    <el-container>
      <el-header>

        <div class="head-logo">
          <img style="width: 60px; height: 60px;" src="../../assets/img/logo.png" alt="logo" />
          <span style=" font-weight: bolder; margin-left: 20px; font-size: 25px;">列车订票系统</span>
        </div>

        <el-menu :default-active="this.$route.path" mode="horizontal" @select="handleSelect" :unique-opened="true"
          :router="true">
          <el-menu-item index="/mainHome">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">车票</template>
            <el-menu-item index="/ticketFind">查询车票</el-menu-item>
            <el-menu-item index="/ticketChange">退/改车票</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">信息查询</template>
            <el-menu-item index="/stationScreen">车站大屏</el-menu-item>
            <el-menu-item index="/trainNumber">车次查询</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">车票订单</template>
            <el-menu-item index="/orderForm">订单管理</el-menu-item>
            <el-menu-item index="/ticketForm">车票管理</el-menu-item>

          </el-submenu>
          <el-submenu index="5">
            <template slot="title">个人中心</template>
            <el-menu-item index="/account">账号信息</el-menu-item>
            <el-menu-item index="/customer">乘车人管理</el-menu-item>
          </el-submenu>
        </el-menu>

        <div v-if="userInfo" class="head-button">
          <el-link herf="/#/" style=" color: #3B99FC;">{{ userInfo.userName }}</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link type="text" @click="setExit" :underline="false">注销</el-link>
        </div>

        <div v-else class="head-button">
          <el-link href="/#/login" style="font-weight: bolder; color: #3B99FC;">
            登录
          </el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link href="/#/regist" style="font-weight: bolder; color: #3B99FC;">
            注册
          </el-link>
        </div>

      </el-header>
      <el-container>
        <el-main>
          
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
import router from '@/router';

export default {
  name: "Home",
  components: { router },
  data() {
    return {
      userInfo: ''
    };
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    setExit() {
      setTimeout(() =>
        this.exit(),
        500
      )
    },

    exit() {
      sessionStorage.clear()
      this.$router.push("/login")
    }
  },

  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('login_user'))
  },


}
</script>

<style scoped>
.el-header {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.head-logo {
  display: flex;
  height: 80px;
  flex-direction: row;
  align-items: center;
  margin-left: 30px;
}

.el-menu {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  justify-content: space-around;
  border: 0;
  margin-left: 575px;
  /* background-color: #3B82F6; */
}

.head-button {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  margin-left: 20px;
}

.el-main {
  display: flex;
  min-height: 88vh;
  flex-direction: column;
  align-items: center;
}


</style>